<template>
  <el-table v-bind="$attrs" border size="small" fit height="calc(100% - 40px)">
    <el-table-column v-if="selection" type="selection" width="55" align="center"></el-table-column>
    <el-table-column v-if="index" type="index" width="50" align="center"></el-table-column>
    <slot></slot>
  </el-table>
  <el-pagination
    v-if="showPage"
    class="pages"
    background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100, 200, 300]"
    :page-size="pageSize"
    layout="slot, ->, prev, pager, next,sizes, jumper"
    :total="totals"
  >
    <span>总共 {{ total }} 条 显示 {{ (currentPage - 1) * pageSize + ' - ' + currentPage * pageSize }} 条</span>
  </el-pagination>
</template>
<script>
import { ref, getCurrentInstance } from 'vue'
export default {
  name: 'c-table',
  props: {
    selection: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Boolean,
      default: true,
    },
    showPage: {
      type: Boolean,
      default: true,
    },
    total: {
      type: Number,
      default: 3,
    },
  },
  computed: {
    totals: function () {
      return this.total > 10 ? this.total : 10
    },
  },
  setup() {
    const { proxy } = getCurrentInstance()
    let pageSize = ref(10)
    let currentPage = ref(1)
    function handleSizeChange(size) {
      pageSize.value = size
      proxy.$emit('changePage', currentPage.value, pageSize.value)
    }
    function handleCurrentChange(page) {
      currentPage.value = page
      proxy.$emit('changePage', currentPage.value, pageSize.value)
    }
    return {
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
    }
  },
}
</script>
<style lang="scss">
.pages {
  margin-top: 15px;
}
::-webkit-scrollbar {
  /*外层轨道*/
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /*内层轨道*/
  background: #c0c4cc;
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
::selection {
  color: #fff;
  background: #1b65b9;
}
</style>
